<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{ house.hname }}</title>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css">
	<link rel="stylesheet" href="/static/css/style.css">
	<script src="/static/js/jquery.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
	<style>
		.dropdown {
      position: relative;
      display: inline-block;
      top: 14px;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      z-index: 999;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
		.carousel-inner{
			margin-left: 380px;
		}
		#title{
			font-size: 40px;
			font-weight: bold;
			font-family: monospace;
			margin:0px;
			margin-left: 20px;
			display: inline-block;
		}
		.carousel-inner{
			width: auto;
		}
		#user-msg{
			width: 250px;
			padding-top: 30px;
			padding-left: 20px;
			border-right: 1px solid rgba(0,0,0,0.3);
			border-top: 1px solid rgba(0,0,0,0.3);
		}
		#house-msg{
			width: 1200px;
			border-top: 1px solid rgba(0,0,0,0.3);
			font-size: 20px;
		}
		#msg{
			margin-top: 20px;
			margin-left: 20px;
		}
		#btn{
			height: 20px;
			display: inline-block;
			position: absolute;
			right: 20px;
			top:80px;
		}
		.mark {
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			height: 100px;
			line-height: 100px;
			width: 300px;
			text-align: center;
			font-size: 20px;
			color: #fff;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 0.1rem;
		}
	</style>
</head>
<body>
	<nav class="navbar navbar-default" id="nav">
	   	<div class="container-fluid">
	       <ul class="nav navbar-nav">
	           <li class="active"><a href="/">首页</a></li>
	           <li><a href="">关于</a></li>
	       </ul>
        {% if uname %}
          <ul class="nav navbar-nav">
             <li class="active">
               <div class="dropdown">
                <span>欢迎:{{ uname }}</span>
                <div class="dropdown-content">
                  <p><a href="/contract" style="text-decoration: none;">个人主页</a></p>
                  <p><a href="/logout" style="text-decoration: none;">退出</a></p>
                </div>
              </div>
             </li>
	        </ul>
        {% else %}
          <div id="nav-form">
            <form action="/login" method="post">
              {% csrf_token %}
              手机号:<input type="text" name="uphone" maxlength="11" id="uphone">
              密码:<input type="password" name="upassword" id="pwd">
              <button type="button" class="btn btn-primary" id="loginView">登录</button>
              <a class="btn btn-default" href="/register">注册</a>
            </form>
	    	  </div>
        {% endif %}
	   	</div>
	</nav>

	<!-- 主体 -->
	<div>
		<p id="title">{{ house.hname }}</p>
		<p id="btn">
			<button class="btn btn-primary" onclick="attentionHouse()">关注房源</button>
			<button class="btn btn-primary" onclick="orderHouse()">订购此房</button>
		</p>
	</div>
	<div id="myCarousel" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators"> 
		 	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		 	<li data-target="#myCarousel" data-slide-to="1"></li> 
		 	<li data-target="#myCarousel" data-slide-to="2"></li> 
		</ol> <!-- 轮播（Carousel）项目 --> 
		<div class="carousel-inner">
			<div class="item active">
				<img src="static/images/4.jpg" alt="First slide"> 
			</div>
			<div class="item">
				<img src="static/images/2.jpg" alt="Second slide">
			</div>
			<div class="item">
				<img src="static/images/3.jpg" alt="Third slide">
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
	</div>
	<div id="msg">
		<table>
			<thead></thead>
			<tbody>
				<tr>
					<td id="user-msg">
						<p class="header-img">
							<img src="{{user.header}}" alt="" style="width: 160px; height: 160px">
						</p>
						<span id="uname">
							{{ user.uname }}<br>
							{{ user.uphone }}
						</span>

					</td>
					<td id="house-msg">
						<span style="font-size: 40px">关于此房源</span><br>
						<span>{{ house.house_desc }}</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

<script>
	function myalert(str) {
		let div = '<div class="mark"></div>';
		$('body').append(div);
		$('.mark').html(str);
		$('.mark').show();
		setTimeout(function() {
			$('.mark').hide();
			$('.mark').remove();
		}, 2000)}
		$('#loginView').click(function(){
			const phone = $('#uphone').val();
			const pwd = $('#pwd').val();
			if(phone.length < 11){
				myalert("请输入正确的手机号")
			}else{
			$.post({
					url: 'login',
					data: {'uphone': phone, 'upassword': pwd},
					success: function (response) {
						console.log(response);
						if(response.code === 3){
							myalert(response.message);
							window.location.reload()
						}
						myalert(response.message);
					},
					dataType: 'json'
				})}
			});
	function attentionHouse(){
		const houseName = $('#title').text();
		$.ajax({
			url: 'attention_house',
			data: {'houseName': houseName},
			success: function (response) {
				myalert(response.message)
			},
			dataType: 'json'
		})
	}
	function orderHouse() {
		const houseName = $('#title').text();
		$.ajax({
			url: 'order_house',
			data: {'houseName': houseName},
			success: function (response) {
				if(response.code === 1){
					window.location.href = 'order_house_html?houseName=' + houseName
				}else{
					myalert(response.message)
				}
			},
			dataType: 'json'
		})
	}
</script>